<template>
  <div>
    <div class="XboxTop">
      <div class="XboxTop_title">异常类型分布</div>
    </div>
    <div class="XboxTop_con" style="padding: 10px;">
      <div style="width: 100%;height: 100%;" ref="ech"></div>
      <!-- <div style="width: 100%;height: 80px;display: flex;">
        <div class="leftj">
          <div style="display: flex;align-items: center;">
            <div class="yuan" style="margin-right: 10px;background: #4C80FD;"></div><span>在线</span>
          </div>
          <div><span style="font-size: 20px;">55</span><span style="font-size: 14px;">个</span></div>
        </div>
        <div class="conj" ref="ech"></div>
        <div class="rightj">
          <div style="display: flex;align-items: center;">
            <div class="yuan" style="margin-right: 10px;background: #FBB23B;"></div><span>离线</span>
          </div>
          <div><span style="font-size: 20px;">55</span><span style="font-size: 14px;">个</span></div>
        </div>
      </div>
      <div style="width: 100%;height: calc(100% - 80px);display: flex;">
        <div style="width: 50%;height: 100%;">
          <div ref="ech2" style="width: 100%;height: calc(100% - 36px);"></div>
          <div style="text-align: center;color: #fff;line-height: 36px;">在线比</div>
        </div>
        <div style="width: 50%;height: 100%;">
          <div ref="ech3" style="width: 100%;height: calc(100% - 36px);"></div>
          <div style="text-align: center;color: #fff;line-height: 36px;">异常比</div>
        </div>
      </div> -->
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  //变量
  data() {
    return {
      Echarts: null,
      echM1: null,
      echM2: null,
      echM3: null,
      dataVal: 60,

    };
  },
  //初始
  mounted() {
    this.$nextTick(() => {
      // this.echM1 = echarts.init(this.$refs.ech, "macarons");
      // this.echM2 = echarts.init(this.$refs.ech2, "macarons");
      // this.echM3 = echarts.init(this.$refs.ech3, "macarons");
      // this.getEch1()
      // this.getEch2()
      // this.getEch3()
      this.Echarts = echarts.init(this.$refs.ech, "macarons");
      this.getEach()
      window.addEventListener("resize", () => {
        //重置容器高宽
        echarts.resize();
      });
    });
  },
  //事件
  methods: {
    getEch1() {

      var option = {
        title: [
          {
            text: '正确率',
            x: 'center',
            top: '55%',
            textStyle: {
              color: '#FFFFFF',
              fontSize: 12,
            },
          },
          {
            text: `${this.dataVal}%`,
            x: 'center',
            y: '20%',
            textStyle: {
              fontSize: '14',
              color: '#FFFFFF',
            },
          },
        ],
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            return "正确率: " + params.value + '%';
          },
        },
        polar: {
          radius: ['100%', '90%'],
          center: ['50%', '50%'],
        },
        angleAxis: {
          max: 100,
          show: false,
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: '',
            type: 'bar',
            roundCap: true,
            barWidth: 30,
            showBackground: true,
            backgroundStyle: {
              color: '#FFFFFF1F',
            },
            data: [this.dataVal],
            coordinateSystem: 'polar',
            itemStyle: {
              normal: {
                color: '#2DDF5C'
              },
            },
          },
        ],
      };
      this.echM1.setOption(option);
    },
    getEch2() {

      var option = {
        title: [
          {
            text: `${this.dataVal}%`,
            x: 'center',
            y: 'center',
            textStyle: {
              fontSize: '14',
              color: '#4C80FD',
            },
          },
        ],
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            return "正确率: " + params.value + '%';
          },
        },
        polar: {
          radius: ['90%', '80%'],
          center: ['50%', '50%'],
        },
        angleAxis: {
          max: 100,
          show: false,
        },
        graphic: {
          elements: [
            {
              type: 'image',
              style: {
                image: require("@/assets/hb_img/bj/zxbl.png"),
                width: 134,
                height: 134,
                zIndex: 2,
                top: "center"
              },
              left: 'center',
              top: 'center',

            },
          ]
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: '',
            type: 'bar',
            roundCap: true,
            barWidth: 30,
            showBackground: true,
            backgroundStyle: {
              color: '#FFFFFF1F',
            },
            data: [this.dataVal],
            coordinateSystem: 'polar',
            itemStyle: {
              normal: {
                color: '#4C80FD'
              },
            },
          },
        ],
      };
      this.echM2.setOption(option);

      window.addEventListener("resize", () => {
        //重置容器高宽
        this.echM2.resize();
      });
    },
    getEch3() {

      var option = {
        title: [
          {
            text: `${this.dataVal}%`,
            x: 'center',
            y: 'center',
            textStyle: {
              fontSize: '14',
              color: '#FBB23B',
            },
          },
        ],
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            return "正确率: " + params.value + '%';
          },
        },
        polar: {
          radius: ['90%', '80%'],
          center: ['50%', '50%'],
        },
        angleAxis: {
          max: 100,
          show: false,
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        graphic: {
          elements: [
            {
              type: 'image',
              style: {
                image: require("@/assets/hb_img/bj/yjbl.png"),
                width: 134,
                height: 134,
                zIndex: 2,
                top: "center"
              },
              left: 'center',
              top: 'center',

            },
          ]
        },
        series: [
          {
            name: '',
            type: 'bar',
            roundCap: true,
            barWidth: 30,
            showBackground: true,
            backgroundStyle: {
              color: '#FFFFFF1F',
            },
            data: [this.dataVal],
            coordinateSystem: 'polar',
            itemStyle: {
              normal: {
                color: '#FBB23B'
              },
            },
          },
        ],
      };
      this.echM3.setOption(option);
      window.addEventListener("resize", () => {
        //重置容器高宽
        this.echM3.resize();
      });
    },
    getEach() {
      var option = {
        grid: {
          left: "2%",
          right: "2%",
          // bottom: "10%",
          containLabel: true,
        },
        legend: {
          show: false,
          x: "center",
          y: "10%",
          data: ["预定数量", "下单数量", "发货数量"],
          textStyle: {
            color: "#999",
            // fontSize: 40
          },
        },
        radar: {
          // shape: 'circle',
          radius: "80%",
          indicator: [
            { name: "灯质异常" },
            { name: "欠压" },
            { name: "过压" },
            { name: "终端故障" },
            { name: "通讯故障" },
          ],
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            itemStyle: {
              borderRadius: 6,
              color: function (params) {
                //自定义颜色
                const colorList = ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C"];
                return colorList[params.dataIndex];
              },
            },
            label: {
              fontSize: 40
            },
            data: [
              {
                value: [400, 400, 400, 400, 400, 400],
                name: "预定数量",
                areaStyle: {
                  color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                    {
                      color: 'rgba(55, 109, 247, 0.5)',
                      offset: 0
                    },
                    {
                      color: 'rgba(55, 109, 247, 0.5)',
                      offset: 1
                    }
                  ])
                }
              },
            ],
          },
        ],
      };
      this.Echarts.setOption(option);
      setTimeout(() => {
        this.Echarts.resize();
      }, 100);
    }

  },
  //销毁
  beforeDestroy() { },
};
</script>
<style scoped>
.leftj {
  margin: 5px 0;
  width: 40%;
  height: calc(100% - 10px);
  background: url("~@/assets/hb_img/bj/lsbj.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  color: #fff;
}

.conj {
  width: 20%;
  height: 100%;
  /* background: url("~@/assets/hb_img/bj/ysbj.png") no-repeat ;
  background-size: 100% 100% ; */
}

.rightj {
  margin: 5px 0;
  width: 40%;
  height: calc(100% - 10px);
  background: url("~@/assets/hb_img/bj/hsbj.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  color: #fff;
}

.yuan {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff
}
</style>
